import { Breadcrumb } from 'antd'
import * as echarts from 'echarts'
import { getReport } from '../../api/report'
import { useRef, useEffect } from 'react'

const Reports = () => {
 const reportRef: any = useRef(null)
 
 const init = async () => {
   const chart = reportRef.current
   const myChart = echarts.init(chart)
   const res = await getReport()
   if(res.data.meta.status === 200) myChart.setOption(res.data.data) 
 }   

 useEffect(() => {init()}, [])

 return (
   <>
    <Breadcrumb items={[{ title: '数据统计' }, { title: '数据报表' }]} />
    <div id='main' ref={reportRef} style={{ width: '750px', height: '400px' }}></div>
   </>
 )
}

export default Reports